<template>
    <div id="Sider">
        <transition name="fade" @touchmove.stop.prevent>
            <!-- 这部分功能主要是关闭侧栏菜单，类似一层遮罩的效果 -->
            <div class="menu-mask" v-show="isRellyShow" @click="hideSide"></div>
        </transition>

        <transition name="slide-fade">
            <!-- 这里才是侧栏代码部分 -->
            <div class="side-content" v-show="isRellyShow">
                <div class="travel">
                    <img src="../../assets/img/5.jpg">
                    <p>欢迎您<br>{{user.userName}}</p>
                </div>
                <div class="userup">
                    <mt-cell title="我的收藏" to="/xiaoxi">
                        <span>></span>
                        <img slot="icon" src='../../assets/img/SHOUCANG.png' width="24" height="24">
                    </mt-cell>
                    <mt-cell title="我的发布" to="/xiaoxi">
                        <span>></span>
                        <img slot="icon" src='../../assets/img/XIAOXI.png' width="24" height="24">
                    </mt-cell>
                    <!-- <mt-cell title="浏览历史" to="/find">
                        <span>></span>
                        <img slot="icon" src='../../assets/img/LISHI.png' width="24" height="24">
                    </mt-cell> -->
                    <mt-cell title="个人信息" to="/stuMsg">
                        <span>></span>
                        <img slot="icon" src='../../assets/img/SHEZHI.png' width="24" height="24">
                    </mt-cell>
                   
                </div>
                <div class="userui" v-if="!shownam">
                    <mt-button type="primary" size='large' v-on:click="layout">账号退出</mt-button>
                </div>
                <div class="userui" v-if="!showname">
                    <mt-button type="primary" size='large' v-on:click="ooos">注册/登陆</mt-button>
                </div>

                <!-- css transition动画 加深理解 -->
                <!-- <a  class="change">
                <img  src="http://p4.qhimg.com/t0160e6a92121691e22.png" alt="" />
            </a> -->

            </div>
        </transition>
    </div>
</template>
<script>
import MemberCenterProvider from "@/providers/MemberCenterProvider";
import axios from "axios";
import { Toast } from "mint-ui";
export default {
  components: {},
  data() {
    return {
      user: "",
      showname: false,
      shownam: true
    };
  },
  methods: {
    hideSide() {
      this.$store.dispatch("hideSideBar");
    },
    layout() {
      Toast("退出成功");
      MemberCenterProvider.layout(), this.$router.push("/userEnroll");
    },
    ooos() {
      this.$router.push("/userEnroll");
    }
  },
  created() {
    axios
      .get("/api/user/layin", {
        params: {}
      })
      .then(res => {
        this.user = res.data;
      });
    axios
      .get("/api/user/layin", {
        params: {}
      })
      .then(res => {
        if (this.user) {
          this.showname = true;
        }
      }),
      axios
        .get("/api/user/layin", {
          params: {}
        })
        .then(res => {
          if (this.user) {
            this.shownam = false;
          }
        });
  },
  computed: {
    isRellyShow() {
      return this.$store.getters.isShowMethod;
    }
  },
  mounted: function() {}
};
</script>
<style scoped>
.userup {
  margin-top: 40px !important;
}

.menu-mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 1;
  z-index: 10;
  background: rgba(0, 0, 0, 0.5);
}

.side-content {
  z-index: 11;
  position: fixed;
  width: 286px;
  height: 100%;
  background: #ffffff;
  top: 0;
  left: 0;
  bottom: 0;
  -webkit-overflow-scrolling: touch;
  background: url("../../assets/img/4.jpg");
}

.fade-enter-to,
.fade-leave-to {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.slide-fade-enter-to,
.slide-fade-leave-to {
  transition: transform 0.3s;
  transform: translate(0px, 0px);
}

.slide-fade-enter,
.slide-fade-leave-to {
  opacity: 0;
  -webkit-transform: translate(-286px, 0px);
  transform: translate(-286px, 0px);
  -webkit-transition: opacity 0.3s ease-in-out 0.3s,
    -webkit-transform 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out 0.3s, transform 0.3s ease-in-out;
}

.travel {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.travel > p {
  color: white;
  margin-top: 8px;
}

.travel > img {
  margin-top: 20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.change {
  display: block;
  width: 284px;
  height: 200px;
  background: url(http://p3.qhimg.com/t0134c65e59012a1257.png) no-repeat center;
  background-size: cover;
  border: 1px solid #fff;
  overflow: hidden;
}

.change img {
  display: block;
  width: 220px;
  height: 180px;
  opacity: 0;
  -webkit-transform: translate(284px, 200px);
  transform: translate(284px, 200px);
  -webkit-transition: opacity 0.5s ease-in-out 0.5s,
    -webkit-transform 1s ease-in-out;
  transition: opacity 0.5s ease-in-out 0.5s, transform 1s ease-in-out;
}

.change:hover img {
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  opacity: 1;
}
</style>